<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>酷我音乐-会员</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/vip.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
    <script src="./fonts/iconfont.js"></script>
    <style>

    </style>
</head>

<body>
    <header id="header">
        <ul class="navigation">
            <li class="active">精选</li>
            <li>边听边玩</li>
            <li>0.88开会员</li>
            <li>领福利</li>
            <li>兑专辑</li>
        </ul>
    </header>
    <main class="box">
        <div class="user-vipcontent">
            <div class="user">
                <img src="https://foruda.gitee.com/avatar/1696342942137152712/5352827_adnaan_1696342942.png!avatar200"
                    alt="">
                <div class="detail">
                    <span>
                        这是一个昵称
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-dingyue"></use>
                        </svg>
                    </span>
                    <p>会员可享受30+项特权</p>
                </div>
                <div class="button">新客0.88元</div>
            </div>
            <ul class="privilege">
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-SQ"></use>
                      </svg>                      
                    <span>高品质音质</span>
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-musicAlbum"></use>
                      </svg>                      
                    <span>数字专辑免费听</span>
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-dress-copy"></use>
                      </svg>                      
                    <span>会员专属装扮</span>
                </li>
            </ul>
        </div>
        <div class="adv">
            <div class="lbox">
                <img src="./images/vip1.png" alt="">
            </div>
            <div class="rbox">
                <img src="./images/vip2.png" alt="">
                <img src="./images/vip3.png" alt="">
            </div>
        </div>
        <div class="day-recommend">
            <div class="header">
                <div class="title">
                    <span id="date"></span>
                    <span>VIP今日推荐</span>
                </div>
                <span class="iconfont icon-bofangqi-bofang"></span>
            </div>
            <ul>
                
            </ul>
        </div>
    </main>
    <main class="box none">
        <p style="color: #fff;text-align: center;">边听边玩</p>
    </main>
    <main class="box none">
        <p style="color: #fff;text-align: center;">0.88开会员</p>
    </main>
    <main class="box none">
        <p style="color: #fff;text-align: center;">领福利</p>
    </main>
    <main class="box none">
        <p style="color: #fff;text-align: center;">兑专辑</p>
    </main>
    <footer>
        <div class="player">
            <span class="record">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dvd_flat"></use>
                </svg>
            </span>
            <span class="music-name">可惜没如果-林俊杰</span>
            <span class="play-btn">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofangqi-bofang"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-next-fill"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-playlist3"></use>
                </svg>
            </span>
        </div>
        <ul>
            <li>
                <div>
                    <a href="./index.html">
                        <div>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-a-1-copy"></use>
                            </svg>
                        </div>
                        <p>首页</p>
                    </a>
                </div>
            </li>
            <li>
                <div>
                    <a href="#">
                        <div>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-icon_zhibo-xian-copy"></use>
                            </svg>
                        </div>
                        <p>直播</p>
                    </a>
                </div>
            </li>
            <li>
                <div>
                    <a href="./ing.html">
                        <div>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-erji-copy"></use>
                            </svg>
                        </div>
                        <p>ing</p>
                    </a>
                </div>
            </li>
            <li>
                <div>
                    <a href="./vip.html">
                        <div class="selected">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zuanshi-copy"></use>
                            </svg>
                        </div>
                        <p>会员</p>
                    </a>
                </div>
            </li>
            <li>
                <div>
                    <a href="./mine.html">
                        <div>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-dkw_wode--copy"></use>
                            </svg>
                        </div>
                        <p>我的</p>
                    </a>
                </div>
            </li>
        </ul>
    </footer>
<script src="./js/vip.js"></script>
</body>

</html>